<template>
    <div style="padding-bottom:55px;">

        <!-- <ul>
            <li v-for="film in dataList" :key="film.filmId">
                <img :src="film.poster" alt="" @click="goDetail(film.filmId)">
                <h3>{{film.name}}</h3>
                <p class="actor">主演:{{film.actors | actorsfilter}}</p>

            </li>
        </ul> -->
        <van-list
            v-model="isLoading"
            @load="onload"
            :finished="isFinished"
            finished-text="没有啦！！！！"
            :immediate-check="false"
        >
            <van-cell v-for="film in dataList" :key="film.filmId">
                <img :src="film.poster" alt="" @click="goDetail(film.filmId)">
                <h3>{{film.name}}</h3>
                <p class="actor">主演:{{film.actors | actorsfilter}}</p>
            </van-cell>
        </van-list>
    </div>
</template>

<script>
import http from '@/utils/http.js'
import Vue from "vue"
import { List,Cell } from "vant"
Vue.use(List).use(Cell)

Vue.filter("actorsfilter",(actors) => {
    // console.log(actors);
    return actors.map(item => item.name).join(" ")
})
export default{
    data() {
        return {
            dataList:[],
            isLoading:false,
            current:1,
            total:0,
            isFinished:false
        };
    },
    mounted () {
        http({
            url:`/gateway?cityId=150300&pageNum=1&pageSize=10&type=1&k=5098835`,
            headers:{
                'X-Host': 'mall.film-ticket.film.list'
            }
        }).then((res) => {
            console.log(res);
            this.dataList = res.data.data.films
            // 保存总条数
            this.total = res.data.data.total
        })
    },
    methods: {
        goDetail(id){
           // console.log(id);
           this.$router.history.push("/detail/" + id )
       },
       onload(){
           console.log("开始加载数据");
           // 判断是否加载完毕
           if(this.dataList.length === this.total){
               this.isFinished = true; // 加载完毕的设置
               return;
           }
           // 正在加载
           this.isLoading = true
           // 从第二页开始加载
            this.current++
            http({
                url:`/gateway?cityId=150300&pageNum=${this.current}&pageSize=10&type=1&k=5098835`,
                headers:{
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then((res) => {
                // 把后面页数的数据追加到原来的数据中
                // this.dataList = [].concat(this.dataList,res.data.data.films)
                this.dataList = [...this.dataList,...res.data.data.films]
                this.isLoading = false // 当前一页数据加载完毕
            })
       }
    }
}
</script>

<style lang="scss" scoped>
    .van-cell{
        overflow: hidden;
        padding: 10px;
        img{
            float: left;
            width: 100px;
        }
    }
    .hidden {
        width: 150px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
</style>